<template>
	<view class="interestWrap">
		<view class="headerPicWrap">
			<image class="headerPic" src="../../static/interest/headerPic.png"></image>
			<view class="headerLabel">领创A卡企业客户权益</view>
		</view>

		<view class="interestArea" @tap="showContact">
			<view class="item">
				<image class="image" src="../../static/interest/zoom.png"></image>
				<view class="desc">高清云视频会议畅享沟通</view>
				<view class="discount">
					<text class="label">返现50%</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/worktile.png"></image>
				<view class="desc">高效实用的项目管理工具让工作更简单</view>
				<view class="discount">
					<text class="label">9折起</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/edianzu.png"></image>
				<view class="desc">领先的办公电脑租赁与管理平台</view>
				<view class="discount">
					<text class="label">部分服务免费</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/kuaifawu.png"></image>
				<view class="desc">一站式企业综合 服务平台</view>
				<view class="discount">
					<text class="label">9折起</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/ingStudio.png"></image>
				<view class="desc">企业创意礼品 定制工作室</view>
				<view class="discount discountExtra">
					<view class="top">
						<text class="label">免礼盒设计费</text>
						<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
					</view>
					<view class="tips">(首次下单)</view>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/wangyiyun.png"></image>
				<view class="desc">支撑企业发展 助力个人成长</view>
				<view class="discount">
					<text class="label">95折</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/mixpace.png"></image>
				<view class="desc">让中国新生代奋斗者更有腔调地工作</view>
				<view class="discount">
					<text class="label">租1年免1月</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/kearea.png"></image>
				<view class="desc">让办公更美好 赋能一亿人的 快乐办公生活</view>
				<view class="discount">
					<text class="label">8折起</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
			<view class="item">
				<image class="image" src="../../static/interest/ucommune.png"></image>
				<view class="desc">服务百万家企业，做城市美好生活的代表品牌</view>
				<view class="discount">
					<text class="label">租1年免1月</text>
					<image class="navigatorInterest" src="../../static/interest/navigatorInterest.png"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			详细咨询可拨打客户服务热线：400-686-2002
		</view>
		<acard-modal showModalMsg='no' :showModal="showModal" showDeleteIcon='hide' btnInfo='我知道了' @tapBtn="hideModal">
			<view slot="content">
				<view class="modalInfo">
					<text class="infoOne">详细咨询可拨打客户服务热线：</text>
					<text class="infoTwo" @tap="doMakePhone">400-686-2002</text>
				</view>
			</view>
		</acard-modal>
	</view>
</template>

<script>
	import acardModal from '../../components/acardModal.vue'
	export default {
		data() {
			return {
				showModal: 'no'
			}
		},
		components: {
			acardModal
		},
		methods: {
			//弹窗显示客服联系方式
			showContact() {
				this.showModal = 'yes'
			},
			//关闭弹窗
			hideModal() {
				this.showModal = 'no'
			},
			//拨打电话
			doMakePhone() {
				uni.makePhoneCall({
					phoneNumber: '4006862002'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	uni-page-body {
		position: relative;
	}

	view {
		line-height: 1;
	}

	.interestWrap {
		background-color: #424242;
		background-image: url('https://acard-static.oss-cn-shenzhen.aliyuncs.com/v2_6/interestBackPic.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.headerPicWrap {
			display: flex;
			align-items: center;
			flex-direction: column;

			.headerPic {
				margin-top: 44rpx;
				width: 186rpx;
				height: 112rpx;
				margin-bottom: 16rpx;
			}

			.headerLabel {
				width: 100%;
				text-align: center;
				height: 52rpx;
				line-height: 52rpx;
				font-size: 38rpx;
				color: #ECDCBD;
				margin-bottom: 44rpx;
			}
		}

		.interestArea {
			display: flex;
			flex-wrap: wrap;
			padding: 0 4.8%;
			justify-content: space-between;

			.item {
				background-color: #ffffff;
				width: 212rpx;
				margin-bottom: 20rpx;
				border-radius: 14rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.image {
					width: 156rpx;
					height: 136rpx;
				}

				.desc {
					line-height: 36rpx;
					font-size: 24rpx;
					-webkit-transform: scale(0.83);
					color: #444444;
					height: 133rpx;
					border-bottom: 2rpx dashed #EDF0F4;
					font-weight: 300;
					text-align: center;
				}

				.discount {
					display: flex;
					align-items: center;
					padding: 20rpx 0 22rpx 0;

					.label {
						height: 36rpx;
						line-height: 36rpx;
						font-size: 26rpx;
						color: #DBAB7D;
						font-weight: 500;
					}

					.navigatorInterest {
						width: 8rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}

					&.discountExtra {
						display: flex;
						flex-direction: column;
						padding: 4rpx 0 8rpx 0;

						.tips {
							font-size: 24rpx;
							-webkit-transform: scale(0.75);
							color: #DBAB7D;
						}

						.top {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

		.footer {
			background-color: #424242;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #908471;
			text-align: center;
			padding: 26rpx 0 46rpx 0;
			font-weight: 300;
		}

		// 弹窗显示
		.modalInfo {
			margin-bottom: 88rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;

			.infoOne {
				color: #777777;
			}

			.infoTwo {
				color: #627EFF;
			}
		}
	}
</style>
